<template>
  <div class="filter-container">
    <div style="display: flex;flex-direction: column">
      <div class="search-main">
        <el-input v-model="searchText"  placeholder="搜索题目" @input="sendDataToParent" style="width: 20vh"></el-input>
        <el-select style="width: 15vh" v-model="selectedDifficulty" placeholder="选择难度" @change="sendDataToParent">
          <el-option label="简单" value="简单" style="color: #1cb8b8;"></el-option>
          <el-option label="中等" value="中等" style="color: #e6a23c;"></el-option>
          <el-option label="困难" value="困难" style="color: #f56c6c;"></el-option>
        </el-select>
        <el-button type="primary" @click="openDialog">选择标签</el-button>
        <slot name="grandchild-slot"></slot>
      </div>

      <div class="selected-tags">
        <div class="tag-container">
          <el-tag
              v-if="selectedDifficulty"
              :color="difficultyColor"
              :style="{ color: difficultyTextColor, background: '#FFFFFF' }"
              size="small"
              closable
              @close="clearSelectedDifficulty"
          >
            {{ difficultyLabel(selectedDifficulty) }}
          </el-tag>
          <el-tag
              v-for="(tag, index) in selectedTags"
              :key="index"
              style="background: #FFFFFF; color: #333333"
              type="success"
              size="small"
              closable
              @close="removeTag(index)"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>
    </div>

    <el-dialog class="dialog-main" title="选择标签" v-model="dialogVisible" width="500px">
      <div v-if="loading">加载中...</div>
      <div v-else v-for="(tagType, index) in uniqueTagTypes" :key="index">
        <h3>{{ tagType }}</h3>
        <div class="tag-container">
          <el-tag
              v-for="(tag, tagIndex) in tags.filter((item) => item.tagType === tagType)"
              :key="tagIndex"
              :type="selectedTags.includes(tag.tag) ? 'success' : 'info'"
              @click="toggleTag(tag)"
              class="tag-item"
              size="small"
          >
            {{ tag.tag }}
          </el-tag>
        </div>
      </div>
    </el-dialog>
  </div>
</template>


<script setup lang="ts">
import {ref, onMounted, computed} from 'vue';
import axios from 'axios';
import {ElMessage} from 'element-plus';

const searchText = ref('');
const tags = ref([]);
const loading = ref(false);
const selectedTags = ref([]);
const selectedDifficulty = ref('');
const dialogVisible = ref(false);

const emit = defineEmits(['update-filter']);

// 发送数据到父组件
const sendDataToParent = () => {
  const filterData = {
    title: searchText.value,
    difficulty: selectedDifficulty.value,
    tags: selectedTags.value
  };
  emit('update-filter', filterData);
};

// 获取标签数据
const fetchTags = async () => {
  try {
    loading.value = true;
    const response = await axios.get(`/oj/ProblemsGroup/tag`, {
      headers: {'Content-Type': 'application/json'},
      params: {query: 'all'}
    });

    if (response.data.code === 200) {
      tags.value = response.data.data;
    } else {
      ElMessage.error('Failed to load tags');
    }
  } catch (error) {
    ElMessage.error('Error loading tags');
  } finally {
    loading.value = false;
  }
};

onMounted(fetchTags);

const toggleTag = (tag) => {
  const index = selectedTags.value.indexOf(tag.tag);
  if (index === -1) {
    selectedTags.value.push(tag.tag);
  } else {
    selectedTags.value.splice(index, 1);
  }
  sendDataToParent();
};

const removeTag = (index) => {
  selectedTags.value.splice(index, 1);
  sendDataToParent();
};

const clearSelectedDifficulty = () => {
  selectedDifficulty.value = '';
  sendDataToParent();
};

const difficultyLabel = (difficulty) => {
  switch (difficulty) {
    case '简单':
      return '简单';
    case '中等':
      return '中等';
    case '困难':
      return '困难';
    default:
      return '';
  }
};

const difficultyColor = computed(() => {
  switch (selectedDifficulty.value) {
    case '简单':
      return '#1cb8b8';
    case '中等':
      return '#e6a23c';
    case '困难':
      return '#f56c6c';
    default:
      return '#f5f5f5';
  }
});

const difficultyTextColor = computed(() => difficultyColor.value);

const openDialog = () => {
  dialogVisible.value = true;
};

const uniqueTagTypes = computed(() => [...new Set(tags.value.map((item) => item.tagType))]);
</script>

<style scoped>
.search-main {
  display: flex;
  align-items: center;
  gap: 20px;
}

.dialog-main {
  width: 500px;
}

.filter-container {
  display: flex;
  flexDirection: column;
  gap: 10px;
}


.tag-item {
  margin-right: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}

.selected-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

</style>

<style scoped>

.search-main {
  display: flex;
  align-items: center; /* 垂直居中对齐子元素 */
  gap: 20px; /* 元素之间的间隙 */
}


.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* 标签间的间隙 */
  padding: 10px 0;
}


.el-tag {
  margin-bottom: 5px; /* 标签底部外边距 */
}
</style>

